<template>
  <div class="person-data">
    <ul>
      <li>
        <span>头像</span>
        <img src="../../assets/images/pic1.jpg" alt class="head-pic">
      </li>
      <li>
        <span>中文姓名</span>
        <input type="text" placeholder="请输入中文姓名">
        <img src="../../assets/images/arrow-right.png" alt style="visibility: hidden;">
      </li>
      <li>
        <span>英文姓名</span>
        <input type="text" placeholder="请输入英文姓名">
        <img src="../../assets/images/arrow-right.png" alt style="visibility: hidden;">
      </li>
      <li @click="selectSex">
        <span>性别</span>

        <input type="text" readonly v-model="dataForm.sex">
        <img src="../../assets/images/arrow-right.png" alt>
      </li>
      <li @click="selectBirthday">
        <span>生日</span>

        <input type="text" readonly v-model="dataForm.dateTime" placeholder="请选择您的生日">
        <img src="../../assets/images/arrow-right.png" alt>
      </li>
      <li @click="selectProvicePopup">
        <span>所在地区</span>
        <input type="text" readonly placeholder="选择省市区" v-model="dataForm.provice">
        <img src="../../assets/images/arrow-right.png" alt>
      </li>
      <li>
        <span>收货地址</span>

        <input type="text" placeholder="请输入收货地址">
        <img src="../../assets/images/arrow-right.png" alt style="visibility: hidden;">
      </li>
    </ul>
    <div class="sex">
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
    <div class="birthday">
      <van-popup v-model="selecBirthday" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="BirthdayConfirm"
          @cancel="selecBirthday = false"
        />
      </van-popup>
    </div>
    <div class="select-prvoice">
      <van-popup v-model="selectProvice" position="bottom">
        <van-area
          :area-list="areaList"
          :item-height="50"
          @confirm="onAddrConfirm"
          @cancel="shut"
          :value="addrCode"
        />
      </van-popup>
    </div>
  </div>
</template>
<script>
import { Popup, Picker, Field, DatetimePicker, Area } from "vant";
import areaList1 from "../../assets/js/area";
export default {
  components: {
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [DatetimePicker.name]: DatetimePicker,
    [Area.name]: Area,
    areaList1
  },
  data() {
    return {
      value: "",
      minHour: 10,
      maxHour: 20,
      minDate: new Date(1990, "01", "01"),
      maxDate: new Date(2019, 10, 1),
      currentDate: new Date(),
      dataForm: {
        sex: "男",
        dateTime: "",
        provice: ""
      },
      selecBirthday: false,
      showPicker: false,
      selectProvice: false,
      columns: [{ text: "男", value: 0 }, { text: "女", value: 1 }],
      addrCode: "440105",
      areaList: {}
    };
  },
  mounted() {
    console.log(areaList1);
    this.areaList = areaList1;
  },
  methods: {
    onConfirm(value) {
      console.log(value);
      this.dataForm.sex = value.text;
      this.showPicker = false;
    },
    selectSex() {
      this.showPicker = true;
    },
    selectBirthday() {
      this.selecBirthday = true;
    },
    BirthdayConfirm(val) {
      console.log(val);
      var year = val.getFullYear();
      var month = val.getMonth() + 1;
      var day = val.getDate();
      console.log(year);
      var res = year + "-" + month + "-" + day;
      this.dataForm.dateTime = res;
      this.selecBirthday = false;
    },
    selectProvicePopup() {
      this.selectProvice = true;
    },
    onAddrConfirm(e) {
      this.selectProvice = false;
      console.log("this.onAddrConfirm=>e", e);
      this.province = e[0].name;
      this.city = e[1].name;
      this.district = e[2].name;
      this.dataForm.provice = e[0].name + "-" + e[1].name + "-" + e[2].name;
    },
    shut() {
      this.selectProvice = false;
    }
  }
};
</script>

<style>
body {
  background: #f1f1f1;
}
</style>
<style lang="scss" scoped>
.person-data {
  background: #fff;
  ul {
    li {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-align-items: center;
      padding-left: 0.4rem;
      border-bottom: 1px solid #e5e5e5;
      height: 1.2rem;
      &:nth-child(1) {
        height: 1.71rem;
      }
      span {
        font-size: 0.3rem;
        width: 1.5rem;
      }
      input {
        height: 1.2rem;
        vertical-align: middle;
        flex: 1;
        -webkit-flex: 1;
        font-size: 0.3rem;
        border: 0;
        text-align: right;
      }
      img {
        margin-right: 0.4rem;
        width: 0.16rem;
        height: 0.28rem;
        margin-left: 0.2rem;
      }
      img.head-pic {
        height: 1.33rem;
        width: 1.33rem;
        border-radius: 50%;
      }
    }
  }
}
</style>


